@import "../var.scss";

.goodsList {
    .exchange{float: right; height: .18rem;border: 1px solid $red;padding: 0 .1rem;border-radius: .2rem; font-size: .14rem;line-height: .18rem; color: $red;margin-top:.3rem;
      &.dis{color: $gray;border-color: $gray}
    }
    .lc-search{
      .input{width:2.9rem;}
      .switch{width:.15rem;height:.15rem;margin-left:.15rem;background: url('~assets/img/mall/icon_search_list_smallpic.png') no-repeat center;background-size:100%;
        &.car{background-image:url('~assets/img/mall/icon_search_list_largepic_car.png');}
      }
    }
    .coupon-title{
      height: .4rem;
      text-align: center;
      line-height: .4rem;
      position: relative;
      font-size: .12rem;
      color: #c9c9c9;
      &::before{
        content: '';
        position: absolute;
        width: 70%;
        height: 1px;
        background: #c9c9c9;
        top: .19rem;
        left: 15%;
        
      }
      &::after{
        content: '以下商品能够使用该优惠券';
        position: relative;
        z-index: 10;
        background: #f2f2f2;
        padding: 0 .1rem;
        // top: .0rem;
        // left: 10%;
      }
    }
    .newCarSep{
        text-align: center;color:$black;height:.5rem;line-height:.5rem;position:relative;
        h1{position:absolute;top:0;left:50%;margin-left:-.36rem;width:.72rem;z-index:2;background: #f2f2f2;}
        span{display:inline-block;height:0;border-top:1px solid #c9c9c9;width:2.06rem;vertical-align: middle;}
    }

    .filter{background: #fff;height:100%;padding:0 .2rem;border-top:$border;
      h1{margin:.2rem 0;}

      .priceIn{height: .4rem;text-align:center;
        input{width:44%;height:100%;border:$border;border-radius: 5px;float: left;text-align:center;box-sizing: border-box;}
        input:nth-of-type(2){float:right;}
        span{line-height: .4rem;}
      }

      .brands{
          span{display:inline-block;font-size:$h3;line-height:.3rem;margin:0 .1rem .1rem 0;border:1px solid hsla(0,0%,93%,.6);padding:0 .08rem;border-radius:4px;}
          span.on{border-color:$red;color:$red;}
      }
    }

    .brandList{
        div{line-height:.3rem;
          img{width:.3rem;height:.3rem;vertical-align:middle;margin-right:.1rem;}
          span{color:red;border:1px solid red;border-radius: 3px;margin-left:.1rem;font-size:$h3;padding: 0 .06rem;}
        }
    }       
    #series li:nth-of-type(1){padding: .07rem .14rem;background: #fafafa;} 
    .brandList,#series{
      li.on div{background: url('~assets/img/mall/icon_list_detail_select.png') no-repeat right center;background-size:17px 12px;}
    }

    .btns{height: .5rem;@include box;border-top:$border;
        button{height: 100%;@include flex;background: #fff}
        button:nth-of-type(2){background: $red;color:#fff;}
      }
    .special-price{
      @include box;
      @include flexJustify(space-between);
      @include flexAlign;
      margin-top: .02rem;
      img{width: .37rem;height:.13rem;align-self: center;margin-top: -.02rem;margin-right: .06rem};
    }
    .car-switch{
      box-shadow: 0px 0px 5px 0px #99999d;
      border-radius: .37rem;
      width: 1.4rem;
      height: .37rem;
      position: fixed;
      bottom: .2rem;
      transform: translateX(-50%);
      left: 50%;
      span{
        font-size: .14rem;
        float:left;
        line-height: .37rem;
        text-align: center;
        display: inline-block;
        height: 100%;
        width: 50%;
      }
      &.car{
        background: url('~assets/img/mall/button_car_label_new.png') no-repeat;
        background-size: 100% 100%;
      }
      &.special{
        background: url('~assets/img/mall/button_car_label_sale.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    .slide-enter-active, .slide-leave-active {
      transition: bottom .5s;
      bottom: .2rem;
    }
    .slide-enter, .slide-leave-to /* .fade-leave-active below version 2.1.8 */ {
      bottom: -.37rem;
    }
    .secKill{height: .16rem;line-height: .16rem;font-size: .12rem;display: inline-block;padding: 0 .04rem;background: linear-gradient(to right, #f02d8d, #f2315e);color: #fff;border-radius: 3px;margin-right: .04rem;}
    
    .record-state{float: right;margin-top:.31rem;color: $red;font-size: .14rem;margin-right: .15rem}
}